<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部搜索 -->
        <el-form ref="searchForm" :model="form">
          <el-row>
            <el-col :span="6">
              <el-form-item label="关键字" label-width="70px" prop="num">
                <el-input
                  v-model="form.num"
                  size="small"
                  placeholder="根据编号搜索"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18" style="text-align: right">
              <el-button size="small" @click.native.prevent="clear"
                >清除</el-button
              >
              <el-button
                type="primary"
                size="small"
                @click.native.prevent="search"
                >搜索</el-button
              >
            </el-col>
          </el-row>
        </el-form>
        <!-- 提示 -->
        <el-alert type="info" show-icon style="margin-bottom: 15px">
          <template slot="title">一共{{ page.total }}条数据</template>
           </el-alert
        >
        <!-- 主题列表 -->
        <el-table :data="tableData" style="width: 100%,margin:0">
          <el-table-column prop="id" label="编号" min-width="220" />

          <el-table-column prop="questionType" label="题型" min-width="80">
            <template slot-scope="{ row }">
              {{ row.questionType | questionsType }}
            </template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="220">
            <!-- {{
                row.questionIDs[0].number}} -->
            <template slot-scope="{ row }">
              <el-button
                v-for="(item, index) in row.questionIDs"
                :key="index"
                type="text"
                @click="showDia(item.id)"
              >
                {{ item.number }}
              </el-button>
            </template>
          </el-table-column>

          <el-table-column prop="addTime" label="录入时间" min-width="180" />
          <el-table-column prop="totalSeconds" label="答题时间(s)" />
          <el-table-column prop="accuracyRate" label="正确率" />
          <el-table-column label="录入人" prop="userName" />
          <el-table-column label="操作" min-width="80">
            <template slot-scope="{ row }">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="questionsDel(row)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          style="margin-top: 20px; text-align: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="page.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="page.total"
        >
        </el-pagination>
      </el-card>
      <!-- 弹层 -->
      <questionPre ref="preview" :showDialog.sync="showDialog" />
    </div>
  </div>
</template>

<script>
import questionPre from '../components/questions-preview.vue'
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
export default {
  components: {
    questionPre
  },
  data () {
    return {
      showDialog: false,
      row: '',
      dialogVisible: false,
      tableData: [],
      page: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      form: {
        num: ''
      }
    }
  },
  created () {
    this.randomsList()
  },
  methods: {
    showDia (id) {
      this.showDialog = true
      this.$refs.preview.detail(id)
    },
    async randomsList () {
      const { data } = await randoms(this.page)
      this.page.total = data.counts
      this.tableData = data.items
    },
    clear () {
      this.$refs.searchForm.resetFields()
    },
    async search () {
      this.page.pagesize = this.page.total
      const { data } = await randoms(this.page)
      // this.page.total = data.counts
      this.tableData = data.items
      this.tableData = this.tableData.filter(item => item.id === this.form.num)
      this.page.total = this.tableData.length === 1 ? 1 : 0

    },
    handleSizeChange (num) {
      this.page.pagesize = num
      this.page.page = 1
      this.randomsList()
    },
    handleCurrentChange (num) {
      this.page.page = num
      this.randomsList()
    },
    async questionsDel (row) {
      this.$confirm('此操作将永久删除改题组，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms(row)
        this.randomsList()
        this.$message.success('操作成功')
      }).catch(err => err)
    }
  }
}
</script>
<style scoped lang='scss'>
.el-pagination__jump {
  margin-left: 0;
}
.el-button--danger {
  color: #f15b5b;
  background: #fef0f0;
  border-color: #fbc4c4;
}
.el-button--danger:focus,
.el-button--danger:hover {
  background: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
}
::v-deep .el-button--text {
  margin-left: 0;
}
</style>
